package com.example.myapplication.screen

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
import androidx.compose.foundation.lazy.staggeredgrid.itemsIndexed
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import coil.compose.SubcomposeAsyncImage
import com.example.myapplication.R
import kotlin.random.Random

@Composable
fun LazyVerticalStaggeredGridDemo(){
    //1.先准备60个高度不同的图片地址
    var imageList = List(60){
        val widht = 300
        val height = Random.nextInt(300,600)
        "https://picsum.photos/${widht}/${height}"
    }

    //2.使用瀑布流组件循环渲染所有的图片
    LazyVerticalStaggeredGrid(
        columns =  StaggeredGridCells.Fixed(2), //2列
        contentPadding = PaddingValues(8.dp), //那边距
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalItemSpacing = 8.dp,
        modifier = Modifier.fillMaxSize()
    ) {
        itemsIndexed(imageList) {index,url->
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.Start
            ) {
                //图片
                SubcomposeAsyncImage(
                    model = url,
                    contentDescription = "图片",
                    modifier = Modifier.fillMaxSize(),
                    contentScale =  ContentScale.Crop,
                    loading = {
                        Box(
                            modifier = Modifier.fillMaxWidth()
                                .height(300.dp)
                                .background(color = Color.LightGray),
                            contentAlignment = Alignment.Center
                        ){
                            Image(
                                painter = painterResource(R.drawable.default_image),
                                contentDescription = "占位图",
                            )
                        }
                    },
                    error = {
                        Box(
                            modifier = Modifier.fillMaxWidth()
                                .height(300.dp)
                                .background(color = Color.LightGray),
                            contentAlignment = Alignment.Center
                        ){
                            Image(
                                painter = painterResource(R.drawable.error_image),
                                contentDescription = "占位图",
                            )
                        }
                    }
                )
                //文本
                Text("图片文本内容")
            }
        }
    }
}